// components/dish/dish.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        backgroundSrc: {
            type: String
        }
    },

    /**
     * 组件的初始数据
     */
    data: {},

    lifetimes: {
        show: function () {
            console.log("show");

        },

        ready: function () {
            console.log("ready");

            const select = wx.createSelectorQuery().in(this);
            select.select("#canvas")
                .fields({
                    node: true,
                    size: true
                })
                .exec((res) => {
                    console.log(JSON.stringify(res))
                    const canvas = res[0].node

                    this.ctx = canvas.getContext('2d')
                    const dpr = wx.getSystemInfoSync().pixelRatio
                    canvas.width = res[0].width * dpr
                    canvas.height = res[0].height * dpr
                    this.ctx.scale(dpr, dpr)
                    this.width = res[0].width;
                    this.height = res[0].height;

                    console.log("width: " + res[0].width + " height : " + res[0].height);
                    this.diameter = Math.min(res[0].width, res[0].height);
                    this.radius = this.diameter / 2;
                    this.image = canvas.createImage()
                    this.image.onload = () => {
                        this.ctx.drawImage(this.image, 0, 0, this.diameter, this.diameter)
                        this.ctx.beginPath()
                        this.ctx.lineWidth = 2
                        this.ctx.strokeStyle = "black"
                        this.ctx.arc(this.radius, this.radius, 10, 0, 2 * Math.PI)
                        this.ctx.stroke()
                    }
                    this.image.src = this.properties.backgroundSrc;

                })
        },
        attached: function () {
            console.log("attached");
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {

        onTouch: function (event) {
            let identifier = event.touches[0];

            let x = Math.abs((this.radius - identifier.x))
            let y = Math.abs((this.radius - identifier.y))
            let radius = Math.sqrt((x * x) + (y * y));
            this.ctx.beginPath()
            this.ctx.clearRect(0, 0, this.width, this.height)
            this.ctx.drawImage(this.image, 0, 0, this.diameter, this.diameter)
            this.ctx.lineWidth = 2
            this.ctx.strokeStyle = "black"

            y = (this.radius - identifier.y);
            x = (identifier.x - this.radius);
            let sin = y / radius
            let cos = x / radius;
            let asin = Math.asin(sin)
            let acos = Math.acos(cos)
            // console.log(" radius "+radius+" x "+x+" y "+y+" sin "+ sin +" cos "+cos+" asin "+ asin + " acos "+ acos);

            let twoPiR = (2 * Math.PI)
            let s = (Math.sin(asin) * this.radius)
            let c = (Math.cos(acos) * this.radius)

            if (radius > this.radius) {
                // console.log(" y "+s+" x "+c+" current_x "+
                // identifier.x+" current_y "+identifier.y+" (c - 150) "+(150 + c)+" (150 - s) "+(150 - s));
                this.ctx.arc((this.radius + c), (this.radius - s), 10, 0, twoPiR)
                this.ctx.stroke()
            } else {
                this.ctx.arc(identifier.x, identifier.y, 10, 0, twoPiR)
                this.ctx.stroke()
            }

            let currentRadius = (asin < 0) ? (Math.PI + (Math.PI - acos)) : acos
            let degress = (180 * currentRadius / Math.PI)
            let r = (radius > this.radius) ? 1 : radius / this.radius;
            this.triggerEvent("currentpoint", {
                degress: degress,
                radius: r
            });
        }
    }
})